<!DOCTYPE HTML>
<html>
<head>
    <title>登录</title>
    <link href="/static/css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div class="login-form">
    <div class="top-login">
        <span><img src="/static/images/logo.png" style="width: 76px;height: 86px;margin: 10px 0 0 13px" alt=""/></span>
    </div>
    <h1>数据资源目录</h1>
    <div class="login-top">
        <form class="layui-form layui-form-pane">
            {% csrf_token %}
            <div class="login-ic">
                <i class="layui-icon layui-icon-username"></i>
                <input type="text" placeholder="用户名" lay-verify="username" name="username"/>
                <div class="clear"></div>
            </div>
            <div class="login-ic">
                <i class="layui-icon layui-icon-password"></i>
                <input type="password" placeholder="密码" lay-verify="password" name="password"/>
                <div class="clear"></div>
            </div>

            <div class="log-bwn">
                <input style="font-size: 18px" type="button" value="登 录" lay-submit lay-filter="login">
            </div>
        </form>
    </div>
</div>
<script src="/static/layui/layui.js"></script>
<script src="/static/jquery/jquery.min.js"></script>
{#<script src="/static/js/set_csrf_async.js"></script>#}
<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form;
        //自定义验证规则
        form.verify({
            username: [/^[a-zA-Z\u4e00-\u9fa5][a-zA-Z0-9\u4e00-\u9fa5]*$/, '用户名只能为数字字母汉字，且不能以数字开头']
            , password: [/^[\S]{6,15}$/, '密码必须6到15位，且不能出现空格']
        });
        // 获取url中携带的参数信息
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
            var context = "";
            if (r != null)
                context = r[2];
            reg = null;
            r = null;
            return context == null || context == "" || context == "undefined" ? "" : context;
        }
        function submit(data) {
            $.ajax({
                    type: 'post',
                    url: '/user/login/',
                    data: data,
                    dataType: 'json',
                    success: function (data) {
                        if (data.code === 0) {
                            // 获取return_url参数
                            var return_url = GetQueryString('return_url');
                            if (return_url == '') {
                                location.href = '/user/center/'
                            }else {
                                location.href = return_url
                            }
                        } else {
                            layer.msg(data.msg, {
                                icon: 5, time: 2000
                            });
                        }
                    }
                }
            );
        }
        // 键盘点击enter事件，无法进行前端的规则验证，但是后端可以验证
{#        $(document).ready(function (e) {#}
{#            $(this).keydown(function (e) {#}
{#                if(e.which == '13'){#}
{#                    var data = $('form').serialize();#}
{#                    submit(data)#}
{#                }#}
{#            })#}
{#        });#}
        //监听提交
        form.on('submit(login)', function (data) {
            var d = data.field;
            submit(d);
            return false;
        });
    });
</script>
</body>
</html>